<script lang="ts" setup>
import Header from '@/components/Header/index.vue'
import SearchPart from '@/components/SearchPart/index.vue'
import Footer from '@/components/Footer/index.vue'
import { ref, computed, onMounted } from 'vue'

const cartList = ref([
  {
    id: 1,
    store: {
      id: 1,
      name: 'YourLife',
    },
    name: 'YourLife 男士休闲裤',
    price: 129,
    specs: [
      {
        id: 1,
        name: '颜色',
        value: '黑色',
      },
      {
        id: 2,
        name: '尺寸',
        value: '175/92A',
      },
    ],
    count: 1,
  },
  {
    id: 2,
    store: {
      id: 1,
      name: 'YourLife',
    },
    name: 'YourLife 男士休闲裤',
    price: 129,
    specs: [
      {
        id: 1,
        name: '颜色',
        value: '蓝色',
      },
      {
        id: 2,
        name: '尺寸',
        value: '175/92A',
      },
    ],
    count: 1,
  },
  {
    id: 3,
    store: {
      id: 2,
      name: 'MyLife',
    },
    name: 'MyLife 女士休闲裤',
    price: 129,
    specs: [
      {
        id: 1,
        name: '颜色',
        value: '黑色',
      },
      {
        id: 2,
        name: '尺寸',
        value: '165/92A',
      },
    ],
    count: 1,
  },
  {
    id: 4,
    store: {
      id: 2,
      name: 'MyLife',
    },
    name: 'MyLife 女士休闲裤',
    price: 129,
    specs: [
      {
        id: 1,
        name: '颜色',
        value: '蓝色',
      },
      {
        id: 2,
        name: '尺寸',
        value: '165/92A',
      },
    ],
    count: 1,
  },
])

let selectAllStatus = computed(() => {
  return storeList.value.every((store: any) => {
    console.log(store.products.every((product: any) => product.selected))
    return store.products.every((product: any) => product.selected)
  })
})

let totalPrice = computed(() => {
  return storeList.value.reduce((sum: number, store: any) => {
    return (
      sum +
      store.products.reduce((sum: number, product: any) => {
        return sum + (product.selected ? product.price * product.count : 0)
      }, 0)
    )
  }, 0)
})

let totalCount = computed(() => {
  return storeList.value.reduce((sum: number, store: any) => {
    return (
      sum +
      store.products.reduce((sum: number, product: any) => {
        return sum + (product.selected ? product.count : 0)
      }, 0)
    )
  }, 0)
})

const storeList = ref<any[]>([])

const selectAll = () => {
  storeList.value.forEach((store: any) => {
    store.selected = !selectAllStatus.value
  })
  storeList.value.forEach((store: any) => {
    store.products.forEach((product: any) => {
      product.selected = store.selected
    })
  })
}

const storeProductSelectStatus = (store: any) => {
  store.selected = !store.selected
  store.products.forEach((product: any) => {
    product.selected = store.selected
  })
}

const productSelectStatus = (product: any) => {
  product.selected = !product.selected
  storeList.value.find((store: any) => store.id === product.storeId).selected =
    storeList.value
      .find((store: any) => store.id === product.storeId)
      .products.every((product: any) => product.selected)
}

const decrease = (product: any) => {
  if (product.count > 1) {
    product.count--
  } else {
    product.count = 1
  }
}

const increase = (product: any) => {
  product.count++
}

const regex = (product: any) => {
  let reg = /\d+$/
  if (!reg.test(product.count)) {
    product.count = 1
  }
  if (product.count < 1) {
    product.count = 1
  }
}

onMounted(() => {
  cartList.value.forEach((item: any) => {
    const product = {
      id: item.id,
      name: item.name,
      price: item.price,
      storeId: item.store.id,
      specs: item.specs,
      count: item.count,
      selected: false,
    }
    item.store.selected = false
    if (
      storeList.value.find((store: any) => store.id === item.store.id) ===
      undefined
    ) {
      item.store.products = [product]
      storeList.value.push(item.store)
    } else {
      storeList.value
        .find((store: any) => store.id === item.store.id)
        .products.push(product)
    }
  })
  console.log(storeList)
})
</script>

<template>
  <Header />
  <div class="search-wrapper">
    <SearchPart />
  </div>
  <div class="cart-container">
    <div class="cart-wrapper">
      <div class="total-product">
        全部商品(<span>{{ cartList.length }}</span
        >)
      </div>
      <div class="operation">
        <div class="operation-item">
          <input
            type="checkbox"
            :checked="selectAllStatus"
            @click="selectAll"
          />
          <span>全选</span>
        </div>
        <div class="operation-item">删除</div>
        <div class="operation-item">移入收藏夹</div>
      </div>
      <div class="cart-list">
        <div class="cart-item" v-for="store in storeList" :key="store.id">
          <div class="product-store">
            <dl>
              <dt>
                <input
                  type="checkbox"
                  :checked="store.selected"
                  @click="storeProductSelectStatus(store)"
                />
              </dt>
              <dd>
                <span>店铺：</span>
                <span class="store-name">{{ store.name }}</span>
              </dd>
            </dl>
          </div>
          <div class="product-info">
            <dl
              :class="['product', product.selected ? 'active' : '']"
              v-for="product in store.products"
              :key="product.id"
            >
              <dt>
                <input
                  type="checkbox"
                  :checked="product.selected"
                  @click="productSelectStatus(product)"
                />
              </dt>
              <dd class="product-name-img-wrapper">
                <div class="img-box">
                  <img src="/src/assets/pre.gif" alt="" />
                </div>
                <div class="name-box">
                  {{ product.name }}
                </div>
              </dd>
              <dd class="spec -wrapper">
                <div
                  class="spec-item"
                  v-for="spec in product.specs"
                  :key="spec.id"
                >
                  <span class="spec-name">{{ spec.name }}</span
                  >：
                  <span class="spec-value">{{ spec.value }}</span>
                </div>
              </dd>
              <dd class="price-wrapper">
                <div class="price"><span>￥</span>{{ product.price }}</div>
                <div class="coupon-price">券后价<span>￥200</span></div>
              </dd>
              <dd class="num-wrapper">
                <div class="num-box">
                  <span class="reduce" @click="decrease(product)">-</span>
                  <input
                    type="text"
                    v-model="product.count"
                    @blur="regex(product)"
                  />
                  <span class="add" @click="increase(product)">+</span>
                </div>
              </dd>
              <dd class="operation-wrapper">
                <div class="operation-item">移入收藏夹</div>
                <div class="operation-item">删除</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="settlement-wrapper">
        <div class="settlement-left">
          <div class="total-price">
            总价<span class="price">￥{{ totalPrice }}</span>
          </div>
          <div class="select-count">
            已选择 <span>{{ totalCount }}</span> 件
          </div>
        </div>
        <div class="settlement-right">
          <div class="settlement-btn">结算</div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<style lang="less" scoped>
.search-wrapper {
  padding: 20px;
}
.cart-container {
  display: flex;
  padding-top: 20px;
  justify-content: center;
  background-color: #d9d9d9;
  padding-bottom: 20px;
}
.cart-wrapper {
  width: 872px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  .total-product {
    line-height: 30px;
    font-weight: bold;
  }
}
.operation {
  position: sticky;
  top: 0;
  display: flex;
  height: 30px;
  margin: 10px 0;
  padding: 10px 5px;
  background-color: #fff;
  .operation-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    &:not(:last-child) {
      margin-right: 10px;
    }
    &:not(:first-child) {
      border: 1px solid #d9d9d9;
    }
  }
  input {
    width: 20px;
    height: 20px;
    outline: none;
    margin: 0;
    vertical-align: top;
    display: inline-block;
    margin-right: 5px;
    border-radius: 5px;
  }
}

.cart-list {
  .cart-item {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    dl {
      display: flex;
      align-items: center;
      padding: 10px 0;
      &.active {
        background-color: #fff0f6f2;
      }
    }
    dt {
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        width: 20px;
        height: 20px;
      }
    }
    dd {
      /* flex: 1; */
      margin: 0 10px;
      &:not(:first-child) {
        flex: 1;
      }
    }
    .product-store {
      padding: 10px 0;
      background-color: #f3f6f8;
    }
    .product-name-img-wrapper {
      display: flex;
      align-items: center;
      .img-box {
        width: 96px;
        height: 96px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e9e9e9;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name-box {
        font-size: 14px;
        width: 180px;
        line-height: 20px;
      }
    }
    .spec-item {
      font-size: 14px;
      margin-bottom: 5px;
    }
    .price-wrapper {
      color: #ff5000;
      .coupon-price {
        font-size: 14px;
        margin-top: 5px;
        span {
          font-weight: bold;
        }
      }
      .price {
        font-weight: bold;
      }
    }
    .num-box {
      display: flex;
      border-radius: 5px;
      border: 1px solid #e9e9e9;
      input {
        flex: 1;
        width: 40px;
        height: 30px;
        text-align: center;
        outline: none;
        border: none;
        padding: 0;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
      }
      .reduce {
        width: 20px;
        line-height: 30px;
        height: 100%;
        border-radius: 5px 0 0 5px;
        text-align: center;
        cursor: pointer;
        color: #000;
        background-color: #fff;
      }
      .add {
        width: 20px;
        color: #000;
        line-height: 30px;
        height: 30px;
        text-align: center;
        border-radius: 0 5px 5px 0;
        background-color: #fff;
        cursor: pointer;
      }
    }
    .operation-item {
      font-size: 14px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &:first-child {
        margin-bottom: 5px;
      }
    }
  }
}

.settlement-wrapper {
  display: flex;
  padding: 20px 0;
  font-size: 14px;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background-color: #fff;
  .settlement-left {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    .total-price {
      color: #000;
      font-size: 14px;
      .price {
        color: #ff5000;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .select-count {
      margin-top: 5px;
      font-size: 14px;
      span {
        color: #ff5000;
        font-weight: bold;
      }
    }
  }
  .settlement-right {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ff5000;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
  }
}
</style>
